<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<!-- AmCharts includes -->
		<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
		<script src="http://www.amcharts.com/lib/3/serial.js"></script>

		<!-- Export plugin includes and styles -->
		<script src="../export.js"></script>
		<link  type="text/css" href="../export.css" rel="stylesheet">

		<script src="export.config.default.js"></script>

		<style>
		body, html {
			height: 100%;
			padding: 0;
			margin: 0;
			overflow: hidden;
			font-size: 11px;
			font-family: Verdana;
		}
		#chartdiv {
			width: 100%;
			height: 100%;
		}
		</style>

		<script type="text/javascript">
			var chartData = [ {
				"year": 2000,
				"cars": 1587,
				"motorcycles": 650,
				"bicycles": 121
			}, {
				"year": 1995,
				"cars": 1567,
				"motorcycles": 683,
				"bicycles": 146
			}, {
				"year": 1996,
				"cars": 1617,
				"motorcycles": 691,
				"bicycles": 138
			}, {
				"year": 1997,
				"cars": 1630,
				"motorcycles": 642,
				"bicycles": 127
			}, {
				"year": 1998,
				"cars": 1660,
				"motorcycles": 699,
				"bicycles": 105
			}, {
				"year": 1999,
				"cars": 1683,
				"motorcycles": 721,
				"bicycles": 109
			}, {
				"year": 2000,
				"cars": 1691,
				"motorcycles": 737,
				"bicycles": 112
			}, {
				"year": 2001,
				"cars": 1298,
				"motorcycles": 680,
				"bicycles": 101
			}, {
				"year": 2002,
				"cars": 1275,
				"motorcycles": 664,
				"bicycles": 97
			}, {
				"year": 2003,
				"cars": 1246,
				"motorcycles": 648,
				"bicycles": 93
			}, {
				"year": 2004,
				"cars": 1218,
				"motorcycles": 637,
				"bicycles": 101
			}, {
				"year": 2005,
				"cars": 1213,
				"motorcycles": 633,
				"bicycles": 87
			}, {
				"year": 2006,
				"cars": 1199,
				"motorcycles": 621,
				"bicycles": 79
			}, {
				"year": 2007,
				"cars": 1110,
				"motorcycles": 210,
				"bicycles": 81
			}, {
				"year": 2008,
				"cars": 1165,
				"motorcycles": 232,
				"bicycles": 75
			}, {
				"year": 2009,
				"cars": 1145,
				"motorcycles": 219,
				"bicycles": 88
			}, {
				"year": 2010,
				"cars": 1163,
				"motorcycles": 201,
				"bicycles": 82
			}, {
				"year": 2011,
				"cars": 1180,
				"motorcycles": 285,
				"bicycles": 87
			}, {
				"year": 2012,
				"cars": 1159,
				"motorcycles": 277,
				"bicycles": 71
			} ];

			var chart = AmCharts.makeChart( "chartdiv", {
				"type": "serial",
				"pathToImages": "http://www.amcharts.com/lib/3/images/",
				"dataProvider": chartData,
				"rotate": false,
				"marginTop": 10,
				"marginRight": 70,
				"categoryField": "year",
				"categoryAxis": {
					"gridAlpha": 0.07,
					"axisColor": "#DADADA",
					"startOnAxis": false,
					"title": "Year",
					"guides": [ {
						"category": "2001",
						"lineColor": "#CC0000",
						"lineAlpha": 1,
						"dashLength": 2,
						"inside": true,
						"labelRotation": 90,
						"label": "fines for speeding increased"
					}, {
						"category": "2007",
						"lineColor": "#CC0000",
						"lineAlpha": 1,
						"dashLength": 2,
						"inside": true,
						"labelRotation": 90,
						"label": "motorcycle maintenance fee introduced"
					} ]
				},
				"valueAxes": [ {
					"stackType": "regular",
					"gridAlpha": 0.07,
					"title": "Traffic incidents"
				} ],
				"graphs": [ {
					"id": "g1",
					"type": "column",
					"title": "Cars",
					"valueField": "cars",
					"bullet": "round",
					"lineAlpha": 0,
					"fillAlphas": 0.6,
					"balloonText": "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
				}, {
					"id": "g2",
					"type": "column",
					"title": "Motorcycles",
					"valueField": "motorcycles",
					"lineAlpha": 0,
					"fillAlphas": 0.6,
					"balloonText": "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
				}, {
					"id": "g3",
					"type": "column",
					"title": "Bicycles",
					"valueField": "bicycles",
					"lineAlpha": 0,
					"fillAlphas": 0.6,
					"balloonText": "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
				} ],
				"legend": {
					"position": "bottom",
					"valueText": "[[value]]",
					"valueWidth": 100,
					"valueAlign": "left",
					"equalWidths": false,
					"periodValueText": "total: [[value.sum]]"
				},
				"chartCursor": {
					"cursorAlpha": 0
				},
				"chartScrollbar": {
					"color": "FFFFFF"
				},
				// this shows how externally included config file can be used
				"export": AmCharts.exportCFG
			} );
		</script>
	</head>
	<body>
		<div id="chartdiv"></div>
	</body>
</html>